<template>
    <div class="add-domain">
        <Input v-model="domainValue" placeholder="请输入你要解析的域名" style="width: 300px" />
        <Button type="primary" @click="handleAdd">添加</Button>
        <Button @click="handleCancel">取消</Button>
    </div>
</template>
<script>
    import { Input, Button } from 'view-design'

    export default {
        props: ['domainShow'],
        components: {
            Input,
            Button
        },
        data () {
            return {
                domainValue: ''
            }
        },
        methods: {
            handleAdd () {

                if (this.domainValue === '') {
                    this.$Message.error('请填写域名，例如: shenshuo.me')
                } else {
                    //1.在这里发起ajax请求post把domainvalue添加中远程列表中
                    //2.如果添加成功加弹出“添加成功”，否则弹出“添加失败”
                    //3.如果添加成功，则添加表格消失，通过$emit告诉父组件修改domainShow为false
                    this.$Message.success('添加域名成功')
                    this.$emit('hidden')
                }
            },
            handleCancel () {
                this.$emit('hidden')
            }
        }
    }
</script>


<style scoped>
    .add-domain div{
        margin-right: 10px;
    }
</style>